<template>
    <div class="control">

        <div class="control-control">
            <!--提现、我的红包、卡券包、收入记录、关注我们-->
            <h2>基础功能</h2>
            <dl @click="showAttentionQrcode" v-if="setting.open_attention === '1'">
                <dt>
                    <svg><use xlink:href="#icon-guanzhuxuanzhong"></use></svg>
                </dt>
                <dd>关注我们</dd>
            </dl>

            <dl>
                <router-link class="a" to="/member/deposit">
                    <dt>
                        <svg><use xlink:href="#icon-tixian"></use></svg>
                    </dt>
                    <dd>提现</dd>
                </router-link>
            </dl>

            <dl>
                <router-link class="a" to="/member/me-red">
                    <dt>
                        <svg><use xlink:href="#icon-hongbao2"></use></svg>
                    </dt>
                    <dd>我的红包</dd>
                </router-link>
            </dl>

            <dl>
                <router-link class="a" to="/member/card-bag">
                    <dt>
                        <svg><use xlink:href="#icon-hongbaokaquan"></use></svg>
                    </dt>
                    <dd>卡券包</dd>
                </router-link>
            </dl>

            <dl>
                <router-link class="a" to="/member/income">
                    <dt>
                        <svg><use xlink:href="#icon-shouru"></use></svg>
                    </dt>
                    <dd>收入记录</dd>
                </router-link>
            </dl>
        </div>

        <div class="control-control">
            <!--素材库、推广链接、卡券管理、员工管理-->
            <h2>运营工具</h2>
            <dl>
                <dt @click="showMedia">
                    <svg><use xlink:href="#icon-sucaizu"></use></svg>
                </dt>
                <dd>素材库</dd>
            </dl>

            <dl>
                <dt @click="showLinks">
                    <svg><use xlink:href="#icon-tuiguang1"></use></svg>
                </dt>
                <dd>推广链接</dd>
            </dl>

            <dl>
                <dt @click="showCoupon">
                    <svg><use xlink:href="#icon-zu2626"></use></svg>
                </dt>
                <dd>卡券管理</dd>
            </dl>

            <dl @click="showFormManage">
                <dt>
                    <svg><use xlink:href="#icon-biaodan2"></use></svg>
                </dt>
                <dd>万能表单</dd>
            </dl>

            <dl>
                <router-link class="a" to="/member/staff">
                    <dt>
                        <svg><use xlink:href="#icon-yuangong-copy"></use></svg>
                    </dt>
                    <dd>员工管理</dd>
                </router-link>
            </dl>
        </div>
    </div>
</template>

<script>
// 个人中心控制台
export default {
    name: "control",
    data() {
      return {
          setting:[]
      }
    },
    mounted() {
        this.getSetting()
    },
    methods: {
        // Run
        /**
         * 获取系统配置
         */
        getSetting() {
            this.$get("setting/find")
                .then((res) => {
                    if(res.data.code === 0) {
                        this.setting = res.data.data
                    }
                })
        },

        /**
         * 显示关注二维码
         */
        showAttentionQrcode() {
          let Attention = this.$createAttention({
              is_show: true,
              onClose: () => {
                  Attention.remove()
              }
          })
        },
        /**
         * 显示素材库
         */
        showMedia() {
            this.$createMedia({
                is_show: new Date().getTime(),
                onSelect: (res) => {
                    console.log(res)
                }
            })
        },
        /**
         * 显示卡券管理
         */
        showLinks() {
            this.$createLinks({
                is_show: new Date().getTime()
            })
        },
        /**
         * 显示卡券管理
         */
        showCoupon() {
            this.$createCoupon({
                is_show: new Date().getTime()
            })
        },
        /**
         * 显示万能表单
         */
        showFormManage() {
            this.$createFormManage({
                is_show: new Date().getTime()
            })
        }
    }
}
</script>

<style scoped lang="less">
@import "@/theme.less";
.control{
    width: 355px;
    margin: 10px auto 0 auto;
    color: @font-color1;
    .control-control{
        background: @page-bg;
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 10px;
        h2{
            font-size: @font-middle;
            color: #000;
            padding:10px;
        }
        dl {
            width: 88.75px;
            height: 65px;
            float: left;
            text-align: center;
            font-size: @font-min;
            margin-bottom: 5px;
            .a{
                display: block;
                color: @font-color1;
            }
            dt{
                margin:0 auto 3px auto;
                width: 35px;
                height: 35px;
                svg{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            dd{
                transform: scale(.9);
            }
        }
    }
}
</style>
